<template>
    <div>
        <!-- ref 和 $refs -->
        <p ref="op">{{num}}</p>
        <button @click="hdClick">按钮</button>
        <child ref="child" />
    </div>
</template>

<script>
import child from './Comp1Child.vue'
export default {
    name:'',
    components: {
        child
    },
    props: {

    },
    data() {
        return {
            num:10
        };
    },
    methods: {
        hdClick(){
            console.log(this.$refs)
            console.log(this.$refs.op)
            console.log(this.$refs.op.innerHTML)
            this.$refs.op.style.color = 'red'
            console.log('----------------')
            
            console.log(this.$refs.child)
            console.log(this.$refs.child.num)
            this.$refs.child.childNum()
        }
    },
    watch: {

    },
    created() {

    },
    mounted() {

    },
    computed: {

    },
};
</script>

<style scoped lang="less">

</style>
